HTML5-এ দুটি নতুন এলিমেন্ট রয়েছে, <progress> এবং <meter>, যা ওয়েব পেজে প্রোগ্রেস বার এবং মিটার তৈরি করতে ব্যবহৃত হয়। এগুলো ব্যবহার করে ইউজারকে কোনো প্রক্রিয়ার অগ্রগতি বা পরিসীমা দেখানো যায়, যেমন ডাউনলোড প্রগ্রেস, আপলোড প্রগ্রেস বা কোনো কাজের অগ্রগতি।
1. <progress> ট্যাগ: Progress Bar তৈরি
<progress> ট্যাগ ব্যবহৃত হয় কোনো কাজের অগ্রগতি প্রদর্শন করতে, যেমন ডাউনলোড বা আপলোড প্রগ্রেস।
ব্যবহার:
<progress value="70" max="100">70%</progress>
বিবরণ:
value: এই অ্যাট্রিবিউটটি প্রগ্রেসের বর্তমান মান নির্ধারণ করে (যেমন 70%)।max: এটি প্রগ্রেসের সর্বোচ্চ মান নির্ধারণ করে (যেমন 100%)।- Fallback text: ব্রাউজার যদি
<progress>ট্যাগকে সাপোর্ট না করে, তাহলে যেটি প্রদর্শিত হবে (এখানে “70%”)।
ফলস্বরূপ:
উপরের কোডটি একটি প্রগ্রেস বার তৈরি করবে যা 70% পূর্ণ হবে, এবং যদি ব্রাউজার <progress> সাপোর্ট না করে, তা হলে "70%" টেক্সটটি দেখাবে।
2. <meter> ট্যাগ: Meter তৈরি
<meter> ট্যাগ ব্যবহৃত হয় কোনো পরিসীমার মধ্যে একটি মান প্রদর্শন করতে, যেমন ফাইল সাইজ, শক্তি ব্যবহার, অথবা কোনো স্কেলে পরিসীমা দেখানো। এটি সাধারনত কোনো ভ্যালুর তুলনায় পরিমাপ দেখানোর জন্য ব্যবহার হয়।
ব্যবহার:
<meter value="0.7" min="0" max="1">70%</meter>
বিবরণ:
value: এটি মিটার স্কেলের বর্তমান মান।min: এটি মিটার স্কেলের সর্বনিম্ন মান।max: এটি মিটার স্কেলের সর্বোচ্চ মান।- Fallback text: ব্রাউজার যদি
<meter>ট্যাগকে সাপোর্ট না করে, তাহলে যেটি প্রদর্শিত হবে (এখানে “70%”)।
ফলস্বরূপ:
উপরের কোডটি একটি মিটার তৈরি করবে যা 0 থেকে 1 এর মধ্যে 70% মান প্রদর্শন করবে, এবং যদি ব্রাউজার <meter> সাপোর্ট না করে, তা হলে "70%" টেক্সটটি দেখাবে।
Progress Bar এবং Meter এর মধ্যে পার্থক্য
- Progress Bar (
<progress>):- একটি চলমান প্রক্রিয়ার অগ্রগতি প্রদর্শন করতে ব্যবহৃত হয় (যেমন, ডাউনলোড বা আপলোড প্রগ্রেস)।
- এখানে
valueএবংmaxঅ্যাট্রিবিউট ব্যবহার করে চলমান প্রগ্রেস দেখানো হয়।
- Meter (
<meter>):- কোনো নির্দিষ্ট পরিসীমার মধ্যে একটি মানের তুলনা দেখাতে ব্যবহৃত হয় (যেমন, সিস্টেমের শক্তি ব্যবহার বা কোনো পরিমাপের স্কেল)।
- এখানে
value,minএবংmaxঅ্যাট্রিবিউট ব্যবহৃত হয়।
স্টাইলিং এবং কাস্টমাইজেশন
এটি HTML5 এলিমেন্টের বেসিক ব্যবহার। আপনি CSS ব্যবহার করে এই প্রগ্রেস বার এবং মিটার ট্যাগগুলিকে আরও কাস্টমাইজ করতে পারেন, যেমন রঙ, আকার এবং স্টাইল পরিবর্তন করা।
প্রগ্রেস বার কাস্টমাইজেশন উদাহরণ:
<progress value="70" max="100" style="width: 100%; height: 30px; background-color: #f0f0f0; border-radius: 5px;">
70%
</progress>
মিটার কাস্টমাইজেশন উদাহরণ:
<meter value="0.7" min="0" max="1" style="width: 100%; height: 30px; background-color: #e0e0e0; border-radius: 5px;">
70%
</meter>
সারাংশ
<progress>এবং<meter>HTML5 এর দুটি শক্তিশালী ট্যাগ, যা প্রগ্রেস বার এবং মিটার তৈরি করতে ব্যবহৃত হয়।<progress>ট্যাগ সাধারণত চলমান প্রক্রিয়ার অগ্রগতি প্রদর্শন করতে ব্যবহৃত হয়, যেখানে<meter>ট্যাগ কোনো নির্দিষ্ট পরিসীমার মধ্যে মান প্রদর্শন করতে ব্যবহৃত হয়।- CSS ব্যবহার করে এগুলোর স্টাইলিং ও কাস্টমাইজেশন করা সম্ভব, যা ইউজার ইন্টারফেসের সৌন্দর্য বাড়াতে সাহায্য করে।
এভাবে, <progress> এবং <meter> ট্যাগগুলো HTML5 এর একটি গুরুত্বপূর্ণ অংশ হয়ে উঠেছে, যা ওয়েবসাইটে ইনপুট এবং ব্যবহারকারী অভিজ্ঞতা উন্নত করার জন্য কার্যকরী।
Read more
